<template>
  <div class="model-container" v-show="info.isShow">
    <h3>弹窗</h3>
    <div class="item">
      <input type="text" v-model="userInfo.name" placeholder="请输入姓名" />
    </div>
    <div class="item">
      <input type="radio" v-model="userInfo.sex" value="male" /> 男
      <input type="radio" v-model="userInfo.sex" value="female" /> 女
    </div>
    <div class="item">
      <input type="text" v-model="userInfo.age" placeholder="请输入年龄" />
    </div>
    <div class="model-btn">
      <button @click="submit">提交</button>
      <button @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      userInfo: {
        name: "",
        sex: "male",
        age: "",
      },
    };
  },
  created() {},
  methods: {
    cancel() {
      this.info.isShow = false;
    },
    submit() {
      //   判断新增还是编辑
      if (this.info.isAdd) {
        this.$emit("sendData", this.userInfo);
        // 清空
        this.userInfo = {
          name: "",
          sex: "male",
          age: "",
        };
        // 弹窗关闭
        this.info.isShow = false;
      } else {
          console.log('编辑')
      }
    },
    sendItem(item){
        // console.log(item)
        let obj = {...item}
        this.userInfo = obj
    }
  },
  components: {},
};
</script>
<style scoped>
.model-container {
  width: 300px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 0 5px #000;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.model-btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
</style>